//由于webpack是基于Node构建的,所以,webpack的配置文件中任何合法的node代码都是支持的
var path = require('path')
//在内存中,根据指定的模板页面,生成一份内存中的首页,同时自动把打包好的bundle注入到页面底部
//如果要配置插件需要在到处的对象中,挂载一个plugin节点
var htmlWebpackPlugin = require('html-webpack-plugin')
var VueLoaderPlugin = require('vue-loader/lib/plugin')

//当以命令行运行webpack或webpack-dev-server的时候,工具发现,我们并没有提供要打包文件
//的入口和出口文件,这个时候webpack会检查项目根目录中的配置文件,并读取这个文件,就拿到
//了到处的这个配置对象,然后根据这个对象,进行打包构建
module.exports = {
    entry:path.join(__dirname,'./src/main.js'),//入口文件
    output:{
        path:path.join(__dirname,'./dist'),//输出路径
        filename:'bundle.js'//指定输出文件
    },
    plugins:[//所有webpack 插件的配置节点
        new htmlWebpackPlugin({
            template:path.join(__dirname,'./src/index.html'),//指定模板文件路径
            filename:'index.html'//设置生成的内存页面名称
        }),
        new VueLoaderPlugin()
    ],
    module:{//配置所有第三方loader模块的
        rules:[//第三方模块的匹配规则
            {test:/\.css$/,use:['style-loader','css-loader']},//处理css文件的loader
            {test:/\.less$/,use:['style-loader','css-loader','less-loader']},//处理less文件的loader
            {test:/\.scss$/,use:['style-loader','css-loader','sass-loader']},//处理scss文件的loader 
            {test:/\.(jpg|png|gif|bmp|jpeg)$/,use:'url-loader?limit=36698&name=[name].[ext]'},//处理图片路径的loader
            //limit给定的值,是图片的大小,单位是byte,如果我们引用的图片大于或等于给定的limit值,则不会被
            //转为Base64格式的字符串,如果图片小于给定的limit值,则会被转为Base64的字符串
            {test:/\.(ttf|eot|svg|woff|woff2)$/,use:'url-loader'},//处理字体文件的loader
            // {test:/\.js$/,use:'babel-loader',exclude:/node_modules/},//配置Babel来转换高级的ES语法
            {test:/\.vue$/,use:'vue-loader'}//处理.vue文件的loader
        ]
    },
    resolve:{
        alias:{//设置Vue被导入时候的包的路径
            // "vue$":"vue/dist/vue.js"
        }
    }
}